<template>
    <div>
      <h3 style="color: cornflowerblue;">事件列表</h3>
      <div class="events-list">
        <div v-for="(item, index) in eventsList" :key="index" class="card">
          <h4>{{ item.title }}</h4>
          <p>{{ item.description }}</p>
          <p><strong>日期:</strong> {{ item.eventDate }}</p>
          <p><strong>地点:</strong> {{ item.location }}</p>
          <p><strong>创建者ID:</strong> {{ item.createdBy }}</p>
          <p><strong>事件类型:</strong> {{ item.eventType }}</p>
          <p><strong>奖励:</strong> ¥{{ item.reward }}</p>
          <p v-if="item.status === 0" style="color: green;"><strong>状态:</strong> 待处理</p>
          <p v-else-if="item.status === 1" style="color: orange;"><strong>状态:</strong> 进行中</p>
          <p v-else-if="item.status === 2" style="color: blue;"><strong>状态:</strong> 已完成</p>
          <p v-else style="color: red;"><strong>状态:</strong> 已取消</p>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    eventsList: Array,
  });
  </script>
  
  <style scoped>
  .events-list {
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 15px;
  }
  
  .card {
    margin-bottom: 10px;
    padding: 10px;
    border: 2px solid #eee;
    border-radius: 4px;
  }
  </style>